<template>
  <view class="navbar-container">
    <u-navbar
      :border="border"
      :leftWidth="80"
      :rightWidth="80"
      backgroundColor="#fff"
      statusBar>
      <view slot="left">
        <view v-if="showBack" class="navbar-left" @click="navigateBackHandle">
          <u-icon class="icon" name="arrow-left" size="18" color="#4b9c64"></u-icon>
          <text class="text">返回</text>
        </view>
      </view>
      <view slot="center">
        <slot name="center">
          <text class="center-title">{{ title }}</text>
        </slot>
      </view>
      <view slot="right">
        <slot name="right">
          <u-button
            v-if="hasConfirm"
            class="navbar-btn"
            :text="rightText || '保存'"
            shape="circle"
            :disabled="loading"
            @click="clickConfirmHandle">
          </u-button>
        </slot>
      </view>
    </u-navbar>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    },
    hasConfirm: {
      type: Boolean,
      default: false
    },
	  // 右边按钮文字
    rightText: {
      type: String,
      default: ''
    },
	  // 左边返回是否使用自定义逻辑
    isCustomBack: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: Boolean
    },
    showBack: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    navigateBackHandle() {
		if (!this.isCustomBack) {
			uni.navigateBack()
		} else{
			this.$emit('navigateBack')
		}
    },
    clickConfirmHandle() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar-left {
  display: flex;
  // align-items: center;
  color: var(--global-icon-color);
  .text {
    font-size: 16px;
  }
}
.navbar-btn {
  min-width: 60px;
  height: 30px;
  color: #fff;
  font-size: 16px;
  background-color: var(--global-color);
  border-color: var(--global-color);
}
.center-title {
  font-size: 16px;
}
</style>
